<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑者天地 - 用户注册</title>
    <link rel="stylesheet" href="css/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/111.css">

</head>
<body>
<div class="runner-graphic">
    <div class="runner"><i class="fas fa-running"></i></div>
    <div class="runner"><i class="fas fa-running"></i></div>
    <div class="runner"><i class="fas fa-running"></i></div>
</div>

<div class="container">
    <div class="register-card">
        <div class="register-header">
            <h2>用户注册</h2>
            <p>加入跑者天地，开启您的跑步之旅</p>
        </div>

        <div class="register-form">
            <form id="registerForm">
                <div class="form-group">
                    <label for="username">
                        <i class="fas fa-user"></i> 用户名
                    </label>
                    <div class="input-container">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" name="username" placeholder="设置您的用户名">
                    </div>
                    <div class="error-message" id="username-error">请输入用户名</div>
                </div>

                <div class="form-group">
                    <label for="mobile">
                        <i class="fas fa-mobile-alt"></i> 手机号码
                    </label>
                    <div class="input-container">
                        <i class="fas fa-mobile-alt"></i>
                        <input type="tel" id="mobile" name="mobile" placeholder="输入您的手机号码">
                    </div>
                    <div class="error-message" id="mobile-error">请输入有效的手机号码</div>
                </div>

                <div class="form-group">
                    <label for="password">
                        <i class="fas fa-lock"></i> 密码
                    </label>
                    <div class="input-container">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" placeholder="设置登录密码(至少6位)">
                        <i class="fas fa-eye password-toggle" id="togglePassword"></i>
                    </div>
                    <div class="strength-meter" id="strength-meter"></div>
                    <div class="strength-text" id="strength-text"></div>
                    <div class="error-message" id="password-error">密码至少需要6位</div>
                </div>

                <div class="form-group">
                    <label for="confirmPassword">
                        <i class="fas fa-lock"></i> 确认密码
                    </label>
                    <div class="input-container">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="confirmPassword" name="confirmPassword" placeholder="再次输入密码">
                        <i class="fas fa-eye password-toggle" id="toggleConfirmPassword"></i>
                    </div>
                    <div class="error-message" id="confirm-error">两次输入的密码不一致</div>
                </div>

                <div class="terms">
                    <input type="checkbox" id="terms" name="terms">
                    <label for="terms">我已阅读并同意<a href="#">服务条款</a>和<a href="#">隐私政策</a></label>
                    <div class="error-message" id="terms-error">请同意服务条款和隐私政策</div>
                </div>

                <button type="button" id="registerButton">
                    <i class="fas fa-user-plus"></i> 注册账户
                </button>
            </form>

            <div class="login-link">
                已有账户？<a href="login.html">立即登录</a>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    &copy; 2023 跑者天地论坛 - 专业的跑步交流社区 | 让每一步都有意义
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 密码强度检测
    function checkPasswordStrength(password) {
        let strength = 0;
        const meter = document.getElementById('strength-meter');
        const text = document.getElementById('strength-text');

        if (password.length === 0) {
            meter.style.display = 'none';
            text.textContent = '';
            return;
        } else {
            meter.style.display = 'block';
        }

        if (password.length >= 6) strength += 1;
        if (/[A-Z]/.test(password)) strength += 1;
        if (/[a-z]/.test(password)) strength += 1;
        if (/[0-9]/.test(password)) strength += 1;
        if (/[^A-Za-z0-9]/.test(password)) strength += 1;

        meter.className = 'strength-meter';

        if (strength < 2) {
            meter.classList.add('weak');
            text.textContent = '密码强度：弱';
            text.style.color = '#e74c3c';
        } else if (strength < 4) {
            meter.classList.add('medium');
            text.textContent = '密码强度：中等';
            text.style.color = '#f39c12';
        } else {
            meter.classList.add('strong');
            text.textContent = '密码强度：强';
            text.style.color = '#2ecc71';
        }
    }

    // 密码显示/隐藏切换
    function setupPasswordToggle() {
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('password');

        const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
        const confirmPassword = document.getElementById('confirmPassword');

        togglePassword.addEventListener('click', function() {
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            this.classList.toggle('fa-eye');
            this.classList.toggle('fa-eye-slash');
        });

        toggleConfirmPassword.addEventListener('click', function() {
            const type = confirmPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            confirmPassword.setAttribute('type', type);
            this.classList.toggle('fa-eye');
            this.classList.toggle('fa-eye-slash');
        });
    }

    // 简化后的表单验证
    function validateForm() {
        // 重置错误状态
        $('.error-message').hide();
        $('input').removeClass('error');

        let isValid = true;
        const username = $('#username').val().trim();
        const mobile = $('#mobile').val().trim();
        const password = $('#password').val();
        const confirmPassword = $('#confirmPassword').val();
        const terms = $('#terms').is(':checked');

        // 验证用户名
        if (!username) {
            $('#username').addClass('error');
            $('#username-error').show();
            isValid = false;
        }

        // 验证手机号码 (简单的11位数字验证)
        if (!mobile || !/^1[3-9]\d{9}$/.test(mobile)) {
            $('#mobile').addClass('error');
            $('#mobile-error').show();
            isValid = false;
        }

        // 验证密码 (至少6位)
        if (!password || password.length < 6) {
            $('#password').addClass('error');
            $('#password-error').show();
            isValid = false;
        }

        // 验证确认密码
        if (!confirmPassword || password !== confirmPassword) {
            $('#confirmPassword').addClass('error');
            $('#confirm-error').show();
            isValid = false;
        }

        // 验证条款
        if (!terms) {
            $('#terms-error').show();
            isValid = false;
        }

        return isValid;
    }

    // 注册函数
    function enroll() {
        if (!validateForm()) {
            return;
        }

        const username = $('#username').val().trim();
        const mobile = $('#mobile').val().trim();
        const password = $('#password').val();

        $.ajax({
            type:"post",
            url:"user/enroll",
            data:{
                username:username,
                password:password,
                mobile:mobile
            },
            success: function(result) {
                if (result.code == "SUCCESS" && result.data =="注册成功") {
                    console.log("111")
                    alert(result.data);
                    location.href = "login.html";
                }else {
                    console.log(result)
                    alert("检查输入是否正确");
                }
            }
        })
    }

    // 初始化
    $(document).ready(function() {
        setupPasswordToggle();

        // 密码强度实时检测
        $('#password').on('input', function() {
            checkPasswordStrength($(this).val());
        });

        // 确认密码实时验证
        $('#confirmPassword').on('input', function() {
            if ($(this).val() !== $('#password').val()) {
                $(this).addClass('error');
                $('#confirm-error').show();
            } else {
                $(this).removeClass('error');
                $('#confirm-error').hide();
            }
        });

        // 注册按钮事件绑定
        $('#registerButton').click(enroll);

        // 初始隐藏强度条
        $('#strength-meter').hide();

        // 输入框获取焦点时移除错误状态
        $('input').on('focus', function() {
            $(this).removeClass('error');
            $(this).nextAll('.error-message').hide();
        });
    });
</script>
</body>
</html>